<template>
	<view class="pageview">
		<!-- <view class="" v-for="(item, index) in memberList" :key="index">
			{{index}}
		</view> -->
		<cl-navbar :title="type == 'list'|| type == 'banned'?$t('group.group_members.title'):$t('group.common.pleaseSelectGroupMember')" leftIconSize="40rpx" placeholder autoBack>
			<template slot="right" v-if="type == 'manager' || type == 'remove'">
				<text style="font-size: 28rpx;" @click="complete">{{$t("group.common.complete")}}</text>
			</template>
		</cl-navbar>


		<view class="searchview">
			<u-search height="64rpx" :showAction="false" :clearabled="false" bgColor="#1e1f30" :inputStyle="{fontSize:'24rpx'}" :placeholder="$t('commonality.search')" @input="searchInput"></u-search>
		</view>

		<view class="listview">
			<scroll-view style="height: 100%;"
				scroll-y
			>
				<template v-for="(item, index) in memberList">
					<view :key="index">
						<!-- {{index}} -->
						<view class="listitem" @click="itemclick(item)">
							<view class="listitem__left" v-if="type == 'manager' || type == 'remove'">
								<image src="/static/icon/select.png" mode="" style="width: 36rpx;height: 36rpx;opacity: 0.6" v-if="type == 'manager' && item.role == 'manager'"></image>
								<image src="/static/icon/select.png" mode="" style="width: 36rpx;height: 36rpx;" v-else-if="selectData.includes(item.user_id)"></image>
								<image src="/static/icon/no-select.png" mode="" style="width: 36rpx;height: 36rpx;" v-else></image>
							</view>
							<view class="listitem__right">
								<cl-avatar :src="item.avatar_url" size="80rpx"></cl-avatar>
								<view class="listitem__right__nickname">
									<text>{{item.group_nickname || item.user_nickname}}</text>
									<text v-if="item.role == 'creator'" class="typetag" style="background-color: #52AAFF;">{{$t("group.common.creator")}}</text>
									<text class="typetag" v-if="item.role == 'manager'">{{$t("group.common.manage")}}</text>
								</view>
							</view>
							<view v-if="type == 'banned'">
								<u-switch v-model="item.is_muted" asyncChange  @change="e=>setChangeMuted(item,e)" size="20"
									:activeValue="1" :inactiveValue="0" inactiveColor="#1e1f30"
									activeColor="#1e1f30"></u-switch>
							</view>
						</view>
					</view>
				</template>
			</scroll-view>
			<!-- <u-list height="100%">
				<template v-for="(item, index) in memberList">
					<u-list-item :key="index">
						<view class="listitem" @click="itemclick(item)">
							<view class="listitem__left" v-if="type == 'manager' || type == 'remove'">
								<image src="/static/icon/select.png" mode="" style="width: 36rpx;height: 36rpx;opacity: 0.6" v-if="type == 'manager' && item.role == 'manager'"></image>
								<image src="/static/icon/select.png" mode="" style="width: 36rpx;height: 36rpx;" v-else-if="selectData.includes(item.user_id)"></image>
								<image src="/static/icon/no-select.png" mode="" style="width: 36rpx;height: 36rpx;" v-else></image>
							</view>
							<view class="listitem__right">
								<cl-avatar :src="item.avatar_url" size="80rpx"></cl-avatar>
								<view class="listitem__right__nickname">
									<text>{{item.group_nickname || item.user_nickname}}</text>
									<text v-if="item.role == 'creator'" class="typetag" style="background-color: #52AAFF;">{{$t("group.common.creator")}}</text>
									<text class="typetag" v-if="item.role == 'manager'">{{$t("group.common.manage")}}</text>
								</view>
							</view>
							<view v-if="type == 'banned'">
								<u-switch v-model="item.is_muted" asyncChange  @change="e=>setChangeMuted(item,e)" size="20"
									:activeValue="1" :inactiveValue="0" inactiveColor="#1e1f30"
									activeColor="#1e1f30"></u-switch>
							</view>
						</view>
					</u-list-item>
				</template>
			</u-list> -->
		</view>
	</view>
</template>

<script>
	// 定义排序规则的映射
	const roleOrder = {
	  'creator': 0,
	  'manager': 1,
	  'member': 2
	};
	
	import groupMembersApi from "@/services/api/group_members.js"
	
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'group_members',
		data() {
			return {
				searchval:'',
				group_id:'',
				type:'list',
				selectData:[]
			}
		},
		computed: {
			...mapState({
				groupInfo: state => state.chat.chatGroupInfo,
				memberList: state => state.chat.chatGroupMembers,
			}),
			getPermission(){
				return (type)=>{
					if(this.groupInfo == null)return false
					// 0所有人 1普通用户 2管理员 3都不允许
					if(this.groupInfo[type] == '0'){
						return true
					}else if(this.groupInfo[type] == '1'){
						if(this.groupInfo.userRole && this.groupInfo.userRole != 'manager')return true
					}else if(this.groupInfo[type] == '2'){
						if(this.groupInfo.userRole && this.groupInfo.userRole != 'member')return true
					}else if(this.groupInfo[type] == '3'){
						if(this.groupInfo.userRole && this.groupInfo.userRole == 'creator')return true
					}
					return false
				}
			},
			getList(){return this.memberList
				// let members = JSON.parse(JSON.stringify(this.memberList))
				// let newdata = members.filter(item => {
				// 	// 根据名字筛选
				// 	if (this.searchval && item.group_nickname && item.group_nickname.indexOf(this.searchval) === -1 && item.nick_name && item.nick_name.indexOf(this.searchval) === -1) {
				// 		return false;
				// 	}
				// 	return true;
				// });
				// newdata.sort((a, b) => {
				//   return roleOrder[a.role] - roleOrder[b.role];
				// });
				// if(this.type == 'list'){
				// 	return newdata
				// }else if(this.type == 'manager'){//设置管理员
				// 	return newdata.filter(item=>item.role != 'creator')
				// }else if(this.type == 'banned'){//禁言
				// 	//如果我的群主
				// 	if(this.groupInfo.userRole == 'creator'){
				// 		return newdata.filter(item=>item.role != 'creator')
				// 	}
				// 	//我不是群主
				// 	return newdata.filter(item=>item.role != 'creator' && item.role != 'manager')
				// }else if(this.type == 'remove'){//踢人
				// 	//如果我的群主
				// 	if(this.groupInfo.userRole == 'creator'){
				// 		return newdata.filter(item=>item.role != 'creator')
				// 	}
				// 	//我不是群主
				// 	return newdata.filter(item=>item.role != 'creator' && item.role != 'manager')
				// }
				// return newdata
			}
		},
		onLoad() {
			let query = this.$Route.query
			if(query.type){
				this.type = query.type
			}
			if(query.group_id)this.group_id = query.group_id
		},
		methods: {
			searchInput(e){
				uni.$u.debounce(()=>{
					this.searchval = e
				}, 500,false)
			},
			async complete(){
				if(!this.selectData.length){
					uni.showToast({
						title:this.$t("group.common.selectOneMember"),
						icon:'none'
					})
					return
				}
				switch (this.type){
					case 'manager':
					    try{
					    	let apires = await groupMembersApi.editRole(this.group_id,this.selectData,'manager')
					    	if(apires){
					    		setTimeout(()=>{
					    			this.$Router.back(1)
					    		},1000)
					    	}
					    }catch(e){
					    	//TODO handle the exception
					    }
						
						break;
					case 'remove':
						let apires = await groupMembersApi.weedout(this.group_id,this.selectData)
						if(apires){
							setTimeout(()=>{
								this.$Router.back(1)
							},1000)
						}
						break;
					default:
						break;
				}
			},
			async setChangeMuted(item,val){
				try{
					let apires = await groupMembersApi.muted(this.group_id,[item.user_id],val)
					if(apires){
						item.is_muted = val
					}
				}catch(e){
					//TODO handle the exception
				}
			},
			async itemclick(item){
				
				if(this.type == 'list'){
					if(item.user_id == this.$store.state.user.user_info.user_id || !this.getPermission('can_add_friends'))return
					try{
						let friendRes = await uni.$api.friends.isFriend({friend_id:item.user_id})
						if(friendRes && friendRes.data.is_friend){
							this.$Router.push({
								name: 'friend_details',
								params: {
									friend_idx:item.user_id,
									avatar_url:item.avatar_url,
									nick_name:item.user_nickname,
									skipAgain:true,//再次进入聊天页面
								}
							});
							return
						}
					}catch(e){}
					this.$Router.push({
						name: 'add_member_details',
						params: {
							user_id:item.user_id,
							nick_name:item.user_nickname,
							avatar_url:item.avatar_url,
							isGroupGo:true
						}
					});
					return
				}
				if (this.selectData.includes(item.user_id)) {
					// 如果数组中包含特定值，则删除该值
					const index = this.selectData.indexOf(item.user_id);
					this.selectData.splice(index, 1);
				} else {
					// 如果数组中不包含特定值，则添加该值
					this.selectData.push(item.user_id);
				}
			},
			godetails(item) {
				this.$Router.push({
					name: 'chatGroupMsg',
					params: {
						group_id: item.group_id,
						group_name: item.group_name,
						avatar_url: item.avatar_url,
					}
				});
			}
		},
	};
</script>

<style scoped lang="scss">
	.typetag{
		white-space: nowrap;
		font-size: 20rpx;
		color: #FFFFFF;
		padding: 0 10rpx;
		height: 28rpx;
		line-height: 28rpx;
		text-align: center;
		border-radius: 10rpx;
		margin-left: 10rpx;
		background-color: #FF7676;
	}
	.searchview {
		margin: 20rpx 30rpx;
		background-color: #1e1f30;
		border-radius: 60rpx;
		padding-right: 20rpx;
	}

	.listview {
		flex: 1;
		overflow: hidden;

		.listitem {
			display: flex;
			align-items: center;
			padding: 20rpx 30rpx;
			position: relative;
			&__left{
				display: flex;
				align-items: center;
				margin-right: 20rpx;
			}
			&__right {
				
				flex: 1;
				display: flex;
				align-items: center;
				&__nickname {
					margin-left: 20rpx;
					color: #fff;
					font-size: 28rpx;
					display: flex;
					align-items: center;
				}
			}
		}
	}
</style>